<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
    <nav class="nav">
        <a class="goback" href="javascript:history.back(1)"></a>
        游客注册
        <a href="#" class="more"></a>
    </nav>
    <section>
        <div>
            <input class="phone" placeholder="请输入您的手机号" id="memberPhone">
            <input class="email" placeholder="请输入您的邮箱" id="email">
            <input class="username" placeholder="请输入您的名字" id="username">
            <input class="password" placeholder="请设置密码（6-18位数字和字母组合）" id="password" type="password" required="required">
            <input class="password" placeholder="请确认密码" id="rePassword" type="password" required="required">
        </div>
        <div>
            <button id="reg">注册</button>
        </div>
        <div>
            <a class="login" href="#">登录</a>
            <a class="forgetPassword" href="#">忘记密码</a>
        </div>
    </section>
    <footer>
        <ul>
            <li>登录</li>
            <li>注册</li>
            <li>回首页</li>
        </ul>
        <div class="copyright">&copy;同程旅游</div>
    </footer>
</body>

</html>
<script>
    let reg=document.querySelector('#reg')
    reg.addEventListener('click',function(){
        //验证表单,只有出错就return false
        // 1、验证电话号码
        let phoneReg=/^1[3-9]\d{9}$/
        let phone=document.querySelector('#memberPhone').value
        if(!phoneReg.test(phone)){
            alert('电话号码验证失败！')
            return false
        }
        // 2、验证邮箱
        let emailReg=/\w+@\w+/
        let email=document.querySelector('#email').value
        if(!emailReg.test(email)){
            alert('邮箱验证失败！')
            return false
        }
        // 成功则提交表单
        if(true){
            alert('提交表单成功')
        }
    })
</script>